<template>
  <div class="tree-list">
    <el-tree
      :data="list"
      node-key="id"
      default-expand-all
      :props="props"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="btnAdd && node.label.indexOf('单元') == -1 " type="primary" size="mini" @click="$emit('addRow', true, '添加子类', data, 0)">
            添加子类
          </el-button>
          <el-button v-if="btnUpdate" type="success" size="mini" @click="$emit('addRow', true, '修改', data)">
            修改
          </el-button>
          <el-button v-if="btnDelete" type="danger" size="mini" @click="$emit('delRow', data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
    props: {
        searchText: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default: () => []
        },
        btnAdd: {
            tyep: Boolean,
            default: true
        },
        btnUpdate: {
            tyep: Boolean,
            default: true
        },
        btnDelete: {
            tyep: Boolean,
            default: true
        }
    },
    data () {
        return {
            props: {
                label: 'name',
                children: 'children'
            }
        }
    },
    methods: {
        filterNode (value, data) {
            console.log(value, data)
            if (!value) return true
            return data.name.indexOf(value) !== -1
        }
    },
    watch: {
        searchText (newVal) {
         this.$refs.tree.filter(newVal)
        }
    }
};
</script>
<style lang="less">
.el-tree-node__content {
    height: 40px;
}
</style>

<style lang="less">
.tree-list {
    width: 600px;
}
.custom-tree-node {
    flex:1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
</style>
